<template>
    <div class="reply-container">
        <!-- 搜索表单 -->
        <div class="mb10">
            <SearchForm :searchFields="searchItems" :maxFirstRowItems="3" @search="handleSearch" @reset="handleReset" />
        </div>

        <!-- 操作按钮 -->
        <div class="mb10">
            <div class="table-operations">
                <a-button type="primary" danger :disabled="!hasSelected" @click="handleBatchDelete">
                    批量删除
                </a-button>
                <span style="margin-left: 8px" v-if="hasSelected">
                    已选择 {{ selectedRowKeys.length }} 项
                </span>
            </div>
        </div>

        <!-- 数据列表 -->
        <div class="card-wrap">
            <DataList ref="dataListRef" api="comment/getListByPage" deleteApi="comment/deleteComment" :columns="columns"
                :rowSelection="rowSelection" @action="onAction">
                <template #user="{ record }">
                    <div v-if="record.user" class="flex items-center space-x-2"
                        style="display: flex;align-items: center;">
                        <a-avatar :size="32" :src="record.user.avatar ? getImageUrl(record.user.avatar) : undefined">
                            {{ record.user.nickname ? record.user.nickname.charAt(0) : (record.user.username ?
                                record.user.username.charAt(0) : 'U') }}
                        </a-avatar>
                        <div style="margin-left: 5px;">{{ record.user.nickname || record.user.username }}</div>
                    </div>
                    <div v-else class="text-gray-400">用户已删除</div>
                </template>

                <template #post="{ record }">
                    <div v-if="record.post">
                        <div class="max-w-xs truncate" :title="record.post.content">{{ record.post.content || '无内容' }}
                        </div>
                    </div>
                    <div v-else class="text-gray-400">帖子已删除</div>
                </template>
            </DataList>
        </div>

        <!-- 评论详情弹窗 -->
        <a-modal v-model:open="detailModalVisible" title="评论详情" :footer="null" width="600px">
            <div v-if="currentComment">
                <a-descriptions :column="1" bordered>
                    <a-descriptions-item label="评论用户">
                        <div v-if="currentComment.user">
                            {{ currentComment.user.nickname || currentComment.user.username }}
                            <span class="text-gray-500">(ID: {{ currentComment.user.id }})</span>
                        </div>
                        <span v-else class="text-gray-400">用户已删除</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="评论内容">
                        <div class="whitespace-pre-wrap">{{ currentComment.content }}</div>
                    </a-descriptions-item>
                    <a-descriptions-item label="所属帖子">
                        <div v-if="currentComment.post">
                            <div class="whitespace-pre-wrap">{{ currentComment.post.content || '无内容' }}</div>
                            <span class="text-gray-500">(ID: {{ currentComment.post.id }})</span>
                        </div>
                        <span v-else class="text-gray-400">帖子已删除</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="回复用户" v-if="currentComment.reply_user">
                        <div v-if="currentComment.replyUser">
                            {{ currentComment.replyUser.nickname || currentComment.replyUser.username }}
                            <span class="text-gray-500">(ID: {{ currentComment.replyUser.id }})</span>
                        </div>
                        <span v-else class="text-gray-400">用户已删除</span>
                    </a-descriptions-item>
                    <a-descriptions-item label="创建时间">
                        {{ dayjs.unix(currentComment.created_at).format('YYYY-MM-DD HH: mm: ss')
                        }}</a-descriptions-item>
                    <a-descriptions-item label="更新时间">
                        {{ dayjs.unix(currentComment.created_at).format('YYYY-MM-DD HH: mm: ss')
                        }}</a-descriptions-item>
                </a-descriptions>
            </div>
        </a-modal>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { message, Modal } from 'ant-design-vue'
import DataList from '@/components/DataList.vue'
import SearchForm from '@/components/SearchForm.vue'
import { baseAPI } from '@/api/api.js'
import { getImageUrl } from '@/utils/utils'
import dayjs from 'dayjs';

// 响应式数据
const dataListRef = ref()
const selectedRowKeys = ref([])
const detailModalVisible = ref(false)
const currentComment = ref(null)

// 搜索表单配置
const searchItems = ref([
    {
        label: '评论内容',
        prop: 'content',
        type: 'input',
        placeholder: '请输入评论内容'
    },
    {
        label: '状态',
        prop: 'status',
        type: 'select',
        placeholder: '请选择状态',
        options: [
            { label: '正常', value: 1 },
            { label: '禁用', value: 0 }
        ]
    },
    {
        label: '创建时间',
        prop: 'date_range',
        type: 'daterange',
        placeholder: ['开始日期', '结束日期']
    }
])

// 计算属性
const hasSelected = computed(() => selectedRowKeys.value.length > 0)

// 行选择配置
const rowSelection = {
    selectedRowKeys: selectedRowKeys,
    onChange: (keys) => {
        selectedRowKeys.value = keys
    }
}

// 表格列配置
const columns = [
    {
        title: '用户',
        dataIndex: 'user',
        width: 150,
        slot: true
    },
    {
        title: '评论内容',
        dataIndex: 'content',
    },
    {
        title: '帖子',
        dataIndex: 'post',
        width: 200,
        slot: true
    },
    {
        title: '创建时间',
        dataIndex: 'created_at',
        width: 180
    },
    {
        title: '操作',
        key: 'action',
        width: 200,
        type: 'action',
        options: [
            { title: '查看', key: 'view' }
        ]
    }
]

// 搜索处理
const handleSearch = (searchParams) => {
    dataListRef.value.search(searchParams)
}

// 重置处理
const handleReset = () => {
    dataListRef.value.reset()
}

// DataList操作处理
const onAction = (action, record) => {
    if (action.key === 'view') {
        showDetailModal(record)
    }
}

// 显示详情弹窗
const showDetailModal = (record) => {
    currentComment.value = record
    detailModalVisible.value = true
}


// 批量删除
const handleBatchDelete = () => {
    Modal.confirm({
        title: '确认批量删除',
        content: `确定要删除选中的 ${selectedRowKeys.value.length} 条评论吗？`,
        onOk: function () {
            return baseAPI.post('comment/batchDeleteComments', { ids: selectedRowKeys.value })
                .then(function () {
                    message.success('批量删除成功')
                    selectedRowKeys.value = []
                    dataListRef.value.refreshData()
                })
                .catch(function (error) {
                    message.error('批量删除失败')
                })
        }
    })
}
</script>

<style scoped>
.reply-container {
    padding: 20px;
}

.search-form {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.operation-buttons {
    margin-bottom: 20px;
}

.operation-buttons .ant-btn {
    margin-right: 8px;
}

.content-cell {
    max-width: 200px;
    word-break: break-all;
}

.text-gray-500 {
    color: #6b7280;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-xs {
    font-size: 0.75rem;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}
</style>